<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="/common/head::head('广告机 - 广告机管理后台')"/>
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=XzxEh6hT4dGzncjHCQEv9KLFEDOtaOQW&services=&t=20180823194355"></script>
    <script type="text/javascript" src="../../../static/application/js/echarts.min_1.js"></script>
    <style>
         #container div{width:200px;height:100px;}
         .box1{float: left;}
         .box2{float:left;}
        .pageDiv ul {
            text-align:center;list-style-type:none;
        }
        .pageDiv ul li{
            display:inline;list-style-type:none;
        }
    </style>
</head>
<body>
<!--/*@thymesVar id="loginUser" type="com.xmlan.machine.module.user.entity.User"*/-->
<!--/*@thymesVar id="page" type="com.github.pagehelper.PageInfo<com.xmlan.machine.module.machineGroup.entity.MachineGroup>"*/-->
<!--/*@thymesVar id="machineGroupList" type="java.util.List<com.xmlan.machine.module.machineGroup.entity.MachineGroup.>"*/-->
<!--/*@thymesVar id="machine" type="com.xmlan.machine.module.advertisementMachine.entity.AdvertisementMachine"*/-->
<!--/*@thymesVar id="adminPath" type="java.lang.String"*/-->
<!--/*@thymesVar id="adminRoleID" type="java.lang.Integer"*/-->
<main style="z-index: 0;padding-left: 0px">
<th:block th:include="/common/header::header('baiduMap')"/>
    <div id="detail-modal" class="modal modal-fixed-footer">
        <div class="modal-content">
            <h4>详情</h4>
            <h6 class="green-text text-darken-2">广告机ID</h6>
            <p id="detail-item-id">id</p>
            <h6 class="green-text text-darken-2">名称</h6>
            <p id="detail-item-name">name</p>
            <h6 class="green-text text-darken-2">加入时间</h6>
            <p id="detail-item-add-time">addTime</p>
            <h6 class="green-text text-darken-2">所属用户</h6>
            <p id="detail-item-user-id">userID -> username</p>
            <h6 class="green-text text-darken-2">机器识别码</h6>
            <p id="detail-item-code-number">codeNumber</p>
            <h6 class="green-text text-darken-2">坐标经度</h6>
            <p id="detail-item-longitude">longitude</p>
            <h6 class="green-text text-darken-2">坐标维度</h6>
            <p id="detail-item-latitude">latitude</p>
            <h6 class="green-text text-darken-2">广告数</h6>
            <p id="detail-item-ads">ads count</p>
            <h6 class="green-text text-darken-2">状态 (灯/充电)</h6>
            <p id="detail-item-status">status</p>
            <h6 class="green-text text-darken-2">地址</h6>
            <p id="detail-item-addrStr">addrStr</p>
            <h6 class="green-text text-darken-2">备注</h6>
            <p id="detail-item-remark">remark</p>
            <h6 class="green-text text-darken-2">摄像头ip</h6>
            <p id="detail-item-cameraIP">cameraIP</p>
            <h6 class="green-text text-darken-2">摄像头序列号</h6>
            <p id="detail-item-cameraSequence">cameraSequence</p>
            <h6 class="green-text text-darken-2">摄像头设备验证码</h6>
            <p id="detail-item-cameraVerificationCode">cameraVerificationCode</p>
        </div>
        <div class="modal-footer">
            <a href="javascript:closeDiv()" class="modal-action modal-close waves-effect waves-green btn-flat">关闭</a>
        </div>
    </div>
<div style="width:100%;height:100%" id="allmap">
</div>
<div class="mapController" id="dg" style="z-index: 9999; position: fixed ! important; right: 50px; top: 15%;">
    <ul>
        <li>
            <div style="overflow: hidden;" class="fc-event cyan ui-draggable ui-draggable-handle">
                <div class="box1">
                <h6 style="float: left">用户共计</h6>
                </div>
                <div class="box2">
                <input id="allLight" style="margin: 0px;padding: 0px;float: left;font-size: 15px;width: 50px;text-align: center;height: 40px">
                </div>
                <div class="box1">
                    <h6 style="float: left">台路灯</h6>
                </div>
            </div>
            <div style="overflow: hidden;margin-top: 5px" class="fc-event cyan ui-draggable ui-draggable-handle">
                <div class="box1">
                    <h6 style="float: left">有</h6>
                </div>
                <div class="box2">
                    <input id="okLight" style="margin: 0px;padding: 0px;float: left;font-size: 15px;width: 50px;text-align: center; height: 40px;">
                </div>
                <div class="box1">
                    <h6 style="float: left">台路灯有位置信息</h6>
                </div>
            </div>
        </li>

        <li>
            <div class="col s12 m3 l3 center">
                <p>
                    <a class="btn btn-large waves-effect waves-light red darken-4" id="triggerBtn">查看所有路灯概况</a>
                </p>
            </div>
        </li>

        <li>
            <div class="col s12 m3 l3 center">
                <p>
                    <a class="btn btn-large waves-effect waves-light blue darken-4" onclick="groupBatch()">分组批量控制路灯</a>
                </p>
            </div>
        </li>
    </ul>
</div>
<div id="myModal" class="modal modal-fixed-footer" style=";background-color: #e4e4e4;height: 1400px;width: 1600px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);">
    <span id="closeBtn" style="margin-left: 95%" class="close">关闭</span>
    <div id="circuit" style="height: 1200px;width: 1400px;margin-top: 0px;margin-left: 150px">
    </div>
</div>

<div id="groupBatch" class="groupBatch" style="z-index:9999;position:fixed;margin-left: 20%; top: 80%;border:5px solid #a9c9e2;background:#e8f5fe;width: 70%;height: 10%;display: none">
    <div style="display: flex;float: left">
            <h5 style="width: 150px;height: 45px;margin: 20px">当前分组：</h5>
            <select style="display: inline-block;width: 200px;height: 45px;float: left;margin: 10px" id="machineGroupList">
                <option th:each="item:${machineGroupList}" th:value="*{item.machineID}" th:text="*{item.getGroupName()}"></option>
            </select>
            <button style="display: flex;width: 80px;height: 45px;float: left;margin-top: 10px;background-color: #00c1de;text-align: center;" onclick="addGroup()">添加分组</button>
        <button style="display: flex;width: 80px;height: 45px;float: left;margin-top: 10px;background-color: #00c1de;text-align: center;" id="updateGroup" onclick="updateGroup(1)">编辑分组</button>
            <select style="display: inline-block;width: 200px;height: 45px;float: left;margin: 10px;margin-left: 100px" id="controlLight">
                <option>-- 请选择 --</option>
                <option value="1">正常开灯</option>
                <option value="0">关灯</option>
                <option value="2">20%亮度</option>
                <option value="5">50%亮度</option>
                <option value="8">80%亮度</option>
                <option value="10">100%亮度</option>
            </select>
            <button style="display: flex;width: 80px;height: 45px;float: left;margin-top: 10px;background-color: #00c1de;text-align: center;" onclick=closeBatch()>确认控制</button>
    </div>
</div>
<div id="updateGroupDiv" class="groupBatch" style="z-index:9999;position:fixed;margin-left: 20%; top: 30%;border:5px solid #a9c9e2;background:#e8f5fe;width: 50%;height: 480px;display: none">
    <h5 style="text-align: center">分组列表</h5>
    <a href="javascript:closeGroup()" class="material-icons" style="margin-left: 900px;">clear</a>
    <table class="highlight responsive-table" >
        <thead>
        <tr>
            <th>分组名称</th>
            <th>分组设备</th>
            <th>删除</th>
        </tr>
        </thead>
        <tbody class="card">
        <tr th:each="item:${page.list}">
            <td th:text="*{item.groupName}">groupName</td>
            <td th:text="*{item.machineID}">machineID</td>
            <td >删除</td>
        </tr>
        </tbody>
    </table>
    <div id="pagination-div" class="center">
        <ul class="pagination">
            <li  class="waves-effect">
                <h6 >共<b th:text="${page.total}"></b>条结果</h6>
                <a href="#"><i class="material-icons">chevron_left</i></a>
            </li>
            <th:block th:each="number:${page.navigatepageNums}">
                <li class="waves-effect">
                    <a th:onclick="'javascript:updateGroup('+${number}+')'"
                       th:text="${number}"></a>
                </li>
            </th:block>
        </ul>
    </div>
</div>
    <form>
        <div id="addGroupDiv" class="groupBatch" style="z-index:9999;position:fixed;margin-left: 20%; top: 20%;border:5px solid #a9c9e2;background:#e8f5fe;width: 50%;height: 60%;display: none">
            <h5 style="text-align: center">添加分组</h5>
            <a href="javascript:closeGroup()" class="material-icons" style="margin-left: 900px;">clear</a>
            <table class="highlight responsive-table" >
                <thead>
                <tr>
                    <th>选中</th>
                    <th>id</th>
                    <th>设备名称</th>
                    <th>设备地址</th>
                </tr>
                </thead>
            </table>
            <div style="position:absolute; bottom:100px;">
                确认选择
                <input id="txt" value=""  style="width:500px;" readonly="readonly" type="text">
                <input id="groupName" type="text" placeholder="输入分组名称" style="width: 200px" name="ok">
                <button type="button" onclick="confirmAddGroup()">确认加入分组</button>
            </div>
            <div class="pageDiv"style="position:absolute; bottom:0px;margin-left: 30%">
                <ul >
                    <li>页面显示<a id="pageCount"></a>条结果</li>
                    <li><a onclick="previousPage()">上一页</a></li>
                    <li><a onclick="nextPage()">下一页</a></li>
                </ul>
            </div>
        </div>
    </form>
</main>
<th:block th:include="/common/footer::footer"/>
<th:block th:include="/common/script::script"/>
<script type="text/javascript">
    //创建地图
    var map = new BMap.Map("allmap");
    var pageCount;
    map.centerAndZoom(new BMap.Point(113.57379, 22.378131), 11);  // 设置中心点
    // map.centerAndZoom( "珠海");
    // map.setCurrentCity("珠海");
    map.addControl(new BMap.MapTypeControl());
    map.enableScrollWheelZoom(true);
    var points = new Array();
    var firstPage = 0;
    $(function () {
        $("#detail-modal").modal();
        $("#delete-modal").modal();
        toast('[[${message}]]');
        $.ajax({
            url: '[[${adminPath}]]/baiduMap/index',
            type: "POST",
            contentType: 'application/json',
            success: function (data) {
                for (var index in data) {
                    if (data[index].longitude != 0 && data[index].latitude != 0) {
                        var obj = {"lng":data[index].longitude,"lat": data[index].latitude,"status":data[index].light,"url":data[index].id,"id":data[index].id,"name":data[index].name};
                        points[index] = obj;
                    }
                }
                $("#allLight").val(data.length) ;
                points = points.filter(function(n) { return n; });//去数组空值，假值
                $("#okLight").val(points.length);
                addMarker(points);
            }
        });
        $("#openAll").click(function(){
            var adIds = [];
            var operate = $("#control_light").val();
            $("input:checkbox[name=checkbox]:checked").each(function(i){
                // adIds = $(this).val();
                adIds.push($(this).val())
                // adIds += (","+$(this).val());
            });
            var url = '[[${adminPath}]]/advertisementMachine/lightBatch';
            var update='[[${adminPath}]]/advertisementMachine/list/1';
            $.ajax({
                url:url,
                data:{"adIds":adIds,"operate":operate},
                traditional :true,
                dataType:"json",
                type:"post",
                success:function (data) {
                    console.log("开灯成功！")
                },error:function () {
                    console.log("开灯失败！")
                }
            });
        })
        var dom = document.getElementById("circuit");
        var myChart = echarts.init(dom);

        var xAxisData = [];
        var data1 = [];
        var data2 = [];
        for (var i = 0; i < 100; i++) {
            xAxisData.push('类目' + i);
            data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
            data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
        }

        option = {
            title: {
                text: '柱状图动画延迟'
            },
            legend: {
                data: ['bar', 'bar2'],
                align: 'left'
            },
            toolbox: {
                // y: 'bottom',
                feature: {
                    magicType: {
                        type: ['stack', 'tiled']
                    },
                    dataView: {},
                    saveAsImage: {
                        pixelRatio: 2
                    }
                }
            },
            tooltip: {},
            xAxis: {
                data: xAxisData,
                silent: false,
                splitLine: {
                    show: false
                }
            },
            yAxis: {
            },
            series: [{
                name: 'bar',
                type: 'bar',
                data: data1,
                animationDelay: function (idx) {
                    return idx * 10;
                }
            }, {
                name: 'bar2',
                type: 'bar',
                data: data2,
                animationDelay: function (idx) {
                    return idx * 10 + 100;
                }
            }],
            animationEasing: 'elasticOut',
            animationDelayUpdate: function (idx) {
                return idx * 5;
            }
        };

        myChart.setOption(option);

    });
    function previousPage() {
        firstPage = firstPage-1;
        if (firstPage = 0){
            firstPage = 0
        }
        var group = document.getElementById("addGroupDiv").style.display ="block";
        var closeGroup = document.getElementById("updateGroupDiv").style.display ="none";
        $('#addGroupDiv table tr').html("");
        $.ajax({
            url:'[[${adminPath}]]/machineGroup/machineList/'+firstPage,
            dataType:"json",
            type:"post",
            success:function (data,status) {
                pageCount = data.length;
                $('#pageCount').text(pageCount);
                // console.log(data[0])
                // machineStr =eval('(' + data + ')');
                $.each(data,function (idx, obj) {
                    var id =data[idx].id;
                    var name =data[idx].name;
                    var addrStr =data[idx].addrStr;
                    var tr =
                        "<tr>"+
                        "<td><input type=\"checkbox\" name=\"checkbox\" value="+id+" onclick=\"checkboxOnclick(this)\"></td>"+
                        "<td>"+id+"</td>"+
                        "<td>"+name+"</td>"+
                        "<td>"+addrStr+"</td>"+
                        "</tr>";
                    $("table").append(tr);
                });
            },error:function () {
            }
        });
    }
    function nextPage() {
        firstPage = firstPage+1;
        var group = document.getElementById("addGroupDiv").style.display ="block";
        var closeGroup = document.getElementById("updateGroupDiv").style.display ="none";
        $('#addGroupDiv table tr').html("");
        $.ajax({
            url:'[[${adminPath}]]/machineGroup/machineList/'+firstPage,
            dataType:"json",
            type:"post",
            success:function (data,status) {
                pageCount = data.length;
                $('#pageCount').text(pageCount);
                // console.log(data[0])
                // machineStr =eval('(' + data + ')');
                $.each(data,function (idx, obj) {
                    var id =data[idx].id;
                    var name =data[idx].name;
                    var addrStr =data[idx].addrStr;
                    var tr =
                        "<tr>"+
                        "<td><input type=\"checkbox\" name=\"checkbox\" value="+id+" onclick=\"checkboxOnclick(this)\"></td>"+
                        "<td>"+id+"</td>"+
                        "<td>"+name+"</td>"+
                        "<td>"+addrStr+"</td>"+
                        "</tr>";
                    $("table").append(tr);
                });
            },error:function () {

            }
        });
    }
    function groupBatch() {
        var group = document.getElementById("groupBatch").style.display ="block";
    }

    $('input[name="checkbox"]').change(function(){
        var result="";
        $("input[name='checkbox']:checked").each(function(){
            result+=$(this).val()+'、';
        });
        if(result!=""){
            result=result.substring(0,result.lastIndexOf('、'));
        }
        $("#txt").val(result);
    });
    $('[type="checkbox"]').click(function () {
        console.log("shuchu")
    });
    function confirmAddGroup() {
        var ids = $("#txt").val();
        var name = $("#groupName").val();
        $.ajax({
            url:'[[${adminPath}]]/machineGroup/adddGroup',
            data:{"ids":ids,"name":name},
            dataType:"json",
            type:"post",
            success:function (data) {
                // window.location='/mng/baiduMap/map/1'
                console.log(data)

            },error:function () {

            }
        });
        // layer.msg("请选择需要删除的素材");
        previousPage();
    }
    function checkboxOnclick() {
        var result="";
        $("input[name='checkbox']:checked").each(function(){
            result+=$(this).val()+'、';
        });
        if(result!=""){
            result=result.substring(0,result.lastIndexOf('、'));
        }
        $("#txt").val(result);
    }
    function addGroup() {
        var group = document.getElementById("addGroupDiv").style.display ="block";
        var closeGroup = document.getElementById("updateGroupDiv").style.display ="none";
        $('#addGroupDiv table tr').html("");
        $.ajax({
            url:'[[${adminPath}]]/machineGroup/machineList/1',
            dataType:"json",
            type:"post",
            success:function (data,status) {
                pageCount = data.length;
                $('#pageCount').text(pageCount);
                // console.log(data[0])
                // machineStr =eval('(' + data + ')');
                $.each(data,function (idx, obj) {
                    var id =data[idx].id;
                    var name =data[idx].name;
                    var addrStr =data[idx].addrStr;
                    var tr =
                        "<tr>"+
                        "<td><input type=\"checkbox\" name=\"checkbox\"  value="+id+" onclick=\"checkboxOnclick(this)\" ></td>"+
                        "<td>"+id+"</td>"+
                        "<td>"+name+"</td>"+
                        "<td>"+addrStr+"</td>"+
                        "</tr>";
                    $("table").append(tr);
                });
            },error:function () {
                console.log(456)
            }
        });
    }

    //添加编辑分组页面
    function updateGroup(pageNo) {
        var group = document.getElementById("updateGroupDiv").style.display ="block";
        var closeGroup = document.getElementById("addGroupDiv").style.display ="none";
        $('#updateGroupDiv table tbody').html("");
        $.ajax({
            url:'[[${adminPath}]]/machineGroup/groupList/'+pageNo,
            type:"GET",
            success:function (machine) {
                machineStr =eval('(' + machine + ')');
                $.each(machineStr,function (idx, obj) {
                    var name;
                    name =machineStr[idx].groupName;
                    var machines = machineStr[idx].machineID;
                    var id = machineStr[idx].id;
                    var tr =
                        "<tr>"+
                        "<td>"+name+"</td>"+
                        "<td>"+machines+"</td>"+
                        "<td>"+"<a onclick='deleteGroup(\""+id+"\")'>删除</a>"+"</td>"+
                        "</tr>";
                    $("table").append(tr);
                });
            }
        });
    }
    function deleteGroup(id) {
        // console.log($("#delete-modal").css('display'))
        $.ajax({
            url:'[[${adminPath}]]/machineGroup/delete',
            data:{"id":id},
            type:"GET",
            success:function () {
                updateGroup(1);
            },error:function () {
                updateGroup(1);
            }
        });
    }
    //创建标注点并添加到地图中
    function addMarker(points) {
        //循环建立标注点
        for(var i =0; i< points.length;i++) {
            var point = new BMap.Point(points[i].lng, points[i].lat); //将标注点转化成地图上的点
            var icon = new BMap.Icon('../../../static/application/image/normal.png', new BMap.Size(40, 50), {
                anchor: new BMap.Size(40, 50)
            });
            var marker = new BMap.Marker(point,{icon: icon}); //将点转化成标注点
            map.addOverlay(marker);  //将标注点添加到地图上
            // //添加监听事件
            (function() {
                var thePoint = points[i];
                marker.addEventListener("click",
                    function() {
                        showInfo(this,thePoint);
                    });
            })();
        }
    }
    function showInfo(thisMarker,point) {
        var status;
        if (point.status == 0) {
            status ="关闭";
        }else if (point.status == 1){
            status = "打开";
        } else if (point.status == 2){
            status = "20%亮度";
        } else if (point.status == 5){
            status = "50%亮度";
        } else if (point.status == 8){
            status = "80%亮度";
        } else {
            status = "100%亮度";
        }
        //获取点的信息
        var sContent =
            '<ul style="margin:0 0 5px 0;padding:0.2em 0">'
            +'<li style="line-height: 26px;font-size: 15px;">'
            +'<span style="width: 50px;display: inline-block;">id：</span>' + point.id + '</li>'
            +'<li style="line-height: 26px;font-size: 15px;">'
            +'<span style="width: 50px;display: inline-block;">名称：</span>' + point.name + '</li>'
            +'<li style="line-height: 26px;font-size: 15px;"><span style="width: 150px;display: inline-block;">查看灯杆信息：</span>' +
            '<a class="btn-floating blue waves-effect waves-light tooltipped btn modal-trigger"' +
            ' href="javascript:openDiv()" onclick="detail('+point.id+')" data-position="top" data-delay="50" data-tooltip="查看详情">详情</a></li>'
            +'<li style="line-height: 26px;font-size: 15px;"><span style="width: 150px;display: inline-block;">当前灯杆亮度状态：</span>'
            +'<select id="control_light" style="display: block;width: 90px;height: 20px"><option selected>'+status+'</option><option value="0">关灯</option><option value="1">开灯</option>' +
            '<option value="2">20%亮度</option><option value="5">50%亮度</option><option value="8">80%亮度</option><option value="10">100%亮度</option></select>' +
            '<input type="button" value="设置" id="updataLight" onclick=\"updataLight('+point.id+')"\></input></<br>' + '</li>'
            +'<li style="width: 150px;display: inline-block;">查看实时摄像：<a href="javascript:callCamera('+point.cameraSequence+','+point.cameraVerificationCode+','+point.accessToken+')">详情</a></li>'
            +'</ul>';
        var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
        thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
    }
    function detail(id) {
        var url = '[[${adminPath}]]/advertisementMachine/detail/' + id;
        $.ajax({
            url: url,
            type: "GET",
            success: function (data) {
                $("#detail-item-id").text(data['machine'].id);
                $("#detail-item-name").text(data['machine'].name);
                $("#detail-item-add-time").text(data['machine'].addTime);
                $("#detail-item-user-id").text(data['owner']);
                $("#detail-item-code-number").text(data['machine'].codeNumber);
                $("#detail-item-longitude").text(data['machine'].longitude);
                $("#detail-item-latitude").text(data['machine'].latitude);
                $("#detail-item-ads").text(data['ads']);
                $("#detail-item-status").text(data['status']);
                $("#detail-item-addrStr").text(data['machine'].addrStr);
                $("#detail-item-remark").text(data['machine'].remark);
                $("#detail-item-cameraIP").text(data['machine'].cameraIP);
                $("#detail-item-cameraSequence").text(data['machine'].cameraSequence);
                $("#detail-item-cameraVerificationCode").text(data['machine'].cameraVerificationCode);
            },
            error: function () {
            }
        });
    }
    function openDiv() {
        $('#detail-modal').show();
    }
    function closeDiv() {
        $('#detail-modal').hide();
    }
    function closeBatch() {
        var adIds = [];
        var machineGroupList = $('#machineGroupList').val();
        var adIds  = machineGroupList.split('、');
        var controlLight = $('#controlLight').val();
        var url = '[[${adminPath}]]/advertisementMachine/lightBatch';
        // console.log(arr)
        // console.log(controlLight)
        $.ajax({
            url:url,
            data:{"adIds":adIds,"operate":controlLight},
            traditional :true,
            dataType:"json",
            type:"post",
            success:function (data) {
                console.log("开灯成功！")
            },error:function () {
                console.log("开灯失败！")
            }
        });
        $('#groupBatch').hide();
    }
    function closeGroup() {
        $('#addGroupDiv').hide();
        $('#updateGroupDiv').hide();
    }
    function updataLight(id) {
        var operate = $("#control_light").val();
        var url = '[[${adminPath}]]/advertisementMachine/lightBatch';
        $.ajax({
            url:url,
            data:{"adIds":id,"operate":operate},
            traditional :true,
            dataType:"json",
            type:"post",
            success:function (data) {
                console.log("开灯成功！")
            },error:function () {
                console.log("开灯失败！")
            }
        });
    }
    function callCamera(cameraSequence,cameraVerificationCode,access_token) {
        window.location='/mng/monitor/uikit?cameraSequence='+cameraSequence+'&cameraVerificationCode='+cameraVerificationCode+'&access_token='+access_token
    }

    /*
    模态框弹出
     */
    (function() {
        /*建立模态框对象*/
        var modalBox = {};
        /*获取模态框*/
        modalBox.modal = document.getElementById("myModal");
        /*获得trigger按钮*/
        modalBox.triggerBtn = document.getElementById("triggerBtn");
        /*获得关闭按钮*/
        modalBox.closeBtn = document.getElementById("closeBtn");
        /*模态框显示*/
        modalBox.show = function() {
            this.modal.style.display = "block";
        }
        /*模态框关闭*/
        modalBox.close = function() {
            this.modal.style.display = "none";
        }
        /*当用户点击模态框内容之外的区域，模态框也会关闭*/
        modalBox.outsideClick = function() {
            var modal = this.modal;
            window.onclick = function(event) {
                if(event.target == modal) {
                    modal.style.display = "none";
                }
            }
        }
        /*模态框初始化*/
        modalBox.init = function() {
            var that = this;
            this.triggerBtn.onclick = function() {
                that.show();
                var mychar = document.getElementById("dg").style.display ="none";
            }
            this.closeBtn.onclick = function() {
                that.close();
                var mych = document.getElementById("dg").style.display ="block";
            }
            this.outsideClick();
        }
        modalBox.init();

    })();

</script>
</body>
</html>
